<template>
  <div class="blogroll">
    <div class="blogroll_content">
      <!--统一样式-->
      <div class="blogroll_title">
        <div class="blogroll_title_icon">
          <img src="./../../../assets/home/youqinglianjie.svg" alt="" />
        </div>
        <p class="blogroll_title_font">友情链接</p>
        <div class="blogroll_title_more" @click="handelLinks">
          更多 <i class="el-icon-d-arrow-right"></i>
        </div>
      </div>
      <div class="blogroll_a">
        <div
          class="blogroll_link"
          v-for="item in linkList"
          :key="item.id"
          @click="handelLink(item.url)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLinksList } from "@/api/home";
export default {
  name: "blogroll",
  data() {
    return {
      linkList: [],
      linkData: {
        page: 1,
        size: 6,
      },
    };
  },
  mounted() {
    this.getLinksList();
  },
  methods: {
    getLinksList() {
      getLinksList(this.linkData).then((response) => {
        if (response.data.code === 20000) {
          const { list } = response.data.results;
          this.linkList = list ? list : [];
        }
      });
    },
    // 点击跳转
    handelLink(url) {
      window.open(url, "_blank");
    },
    // 更多
    handelLinks(){
      this.$router.push({
        path: "/links",
        query: {
          routerName: "友情链接",
        },
      });
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.blogroll {
  height: 252px;
  background-color: #f0f7f3;
  color: #333;

  .blogroll_content {
    width: 1280px;
    margin: 0 auto;

    .blogroll_title {
      padding-top: 40px;
      display: flex;
      padding-bottom: 15px;
      border-bottom: 2px solid #0a7b19;

      .blogroll_title_icon {
        width: 32px;
        height: 32px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .blogroll_title_font {
        font-weight: bold;
        font-size: 24px;
        margin-left: 15px;
        width: 100px;
      }

      .blogroll_title_more {
        font-size: 12px;
        height: 32px;
        line-height: 32px;
        text-align: right;
        width: 1133px;
        cursor: pointer;
      }
    }

    .blogroll_a {
      display: flex;
      margin-top: 24px;

      .blogroll_link {
        cursor: pointer;
        margin-left: 20px;
        // width: 196px;
        height: 48px;
        // overflow: hidden;
        border-radius: 5px;
        padding: 0 10px;
        border: 1px solid #0a7b19;
        text-align: center;
        line-height: 48px;
        transition: all 0.2s linear;

        &:first-child {
          margin: 0;
        }

        &:hover {
          color: white;
          background-color: #0a7b19;
        }
      }
    }
  }
}
</style>
